import { OneModal } from '@/components/one-ui';
import React, { Ref, useRef } from 'react';
import { IOneModalRef } from '@/pages/type';
import { Button } from 'antd';
import { onCloseModalCommon } from '@/utils';
import ScrollBarLayout from '@/components/ScrollBarLayout';

export const SeeTemplateInfoModal: React.FC<TempContractManageAPI.ISeeTemplateInfoModal> = ({ onClose, checkRowsInfo }) => {
  /** 弹框Ref */
  const seeInfomOdalRef: Ref<IOneModalRef> = useRef(null);

  return (
    <OneModal
      open={true}
      ref={seeInfomOdalRef}
      width={document.body.clientWidth * 0.35}
      title={'使用说明'}
      onCancel={onClose}
      bodyStyle={{
        padding: '5px 10px',
        height: document.body.clientHeight * 0.4,
      }}
      centered
      footer={
        <Button
          onClick={() => {
            onCloseModalCommon(seeInfomOdalRef);
          }}
        >
          关闭
        </Button>
      }
    >
      <ScrollBarLayout>
        <div
          style={{ fontSize: '20px', padding: '10px', textIndent: '2em' }}
          dangerouslySetInnerHTML={{
            __html: checkRowsInfo && checkRowsInfo?.id ? checkRowsInfo?.templateInfo : '',
          }}
        />
      </ScrollBarLayout>
    </OneModal>
  );
};
